<template>
  <div>
    <el-card>
      <el-table :data="orderList">
        <el-table-column prop="orderTitle" label="订单标题" width="230" />
        <el-table-column prop="subscribe" label="描述" width="250" />
        <el-table-column prop="totalAmount" label="金额" width="70">
          <template slot-scope="s">
            {{s.row.totalAmount + '元'}}
          </template>
        </el-table-column>
        <el-table-column prop="oid" label="订单号" width="220" />
        <el-table-column prop="createTime" label="创建时间" width="170" />
        <el-table-column prop="payTime" label="支付状态" width="130">
          <template slot-scope="s">
            <el-tag
              :type="s.row.state == 0 ? 'info' : s.row.state==1? 'success' : s.row.state==2 ? 'warning' : 'danger'"
            >
              {{ s.row.state==0 ? '未支付' : s.row.state==1? '已支付' : s.row.state==2 ? '已退款' : '已删除' }}
            </el-tag>
          </template>
        </el-table-column>
        <el-table-column label="操作">
          <template slot-scope="s">
            <el-button v-if="s.row.state!=3&&s.row.state!=2" type="danger" @click="deleteOrder(s.row.oid)" >删除</el-button>
            <el-button v-else type="danger" disabled plain >删除</el-button>
            <el-button v-if="s.row.state === 0" type="primary" @click="payOrder(s.row.oid)" >支付</el-button>
            <el-button v-else type="danger" disabled plain>支付</el-button>
          </template>
        </el-table-column>
      </el-table>
    </el-card>
  </div>
</template>

<script>
import { deleteOrderByOid, getOrdersList } from '../../../api/order'
import { pay} from '../../../api/cost'
export default {
  name: 'orders',
  data() {
    return {
      orderList: []
    }
  },
  created() {
    this.getOrders()
  },
  methods: {
    payOrder(oid){
      pay(oid).then(res=>{
        let id = window.open("","_blank");
        id.document.body.innerHTML=res.data;
        const div = id.document.createElement('div')
        /* 此处form就是后台返回接收到的数据 */
        div.innerHTML = res.data
        id.document.body.appendChild(div)
        id.document.forms[0].submit()
      }).catch(err =>{
        this.$message.error(err.message)
      })
    },
    getOrders() {
      getOrdersList()
        .then(res => {
          this.orderList = res.data.list
          console.log('res', res.data.list)
          this.$message.success('获取订单列表成功！')
        })
        .catch(err => {
          this.$message.error('获取订单列表失败！')
        })
    },
    deleteOrder(oid) {
      this.$confirm('是否删除该订单？', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        deleteOrderByOid(
          oid
        ).then(res => {
          this.$message.success('删除成功！')
          this.getOrders()
        }).catch(err => {
          console.log('err', err)
          this.$message.error('删除失败！')
        })
      }).catch(() => {
        this.$message({
          type: 'info',
          message: '已取消删除'
        })
      })
    },
  }
}
</script>

<style scoped>

</style>
